<template>
	<view class="container">
		
		<shopHead />


		<view class="goods_contain" v-for="(items,idx) in navList" :key = "idx">
			<view class="module_cont">
				<view class="module">
					{{items.title}}
				</view>
			</view>
			<view class="goods_tp1">
				<image :src="items.advImg" mode="" class="tp1_img"></image>
			</view>
			<u-waterfall class="goods_content" v-model="items.flowList">
				<template v-slot:left="{leftList}">
					<goodItme v-for="(item, index) in leftList" :img="item.image" :price="item.price" :dec="item.dec" @plusNum="addGoods(index)" />
				</template>
				<template v-slot:right="{rightList}">
					<goodItme v-for="(item, index) in rightList" :img="item.image" :price="item.price" :dec="item.dec"  @plusNum="addGoods(index)"  />
				</template>
			</u-waterfall>
		</view>
		<footerBar1></footerBar1>
	</view>
</template>

<script>
	import shopHead from '@/plugins/shop_header/shop_header.vue'
	import addBtn from "@/plugins/add_btn/add_btn.vue"
	import goodItme from "@/plugins/good_item/good_item.vue"
	import footerBar1 from "@/plugins/footerBar1/footerBar1.vue"
	export default {
		data() {
			return {
				navIndex: 0,
				navList: [{
					title: "智能空调",
					advImg:"/static/image/prod1.png",
					flowList: [{
							price: 35,
							title: '测试商品1',
							dec: '测试商品1的描述',
							image: '/static/image/goods_item.png',
						},
						{
							price: 75,
							title: '测试商品2',
							dec: '测试商品21231的描去啊阿萨大情为全文述',
							image: '/static/image/goods_item.png',
						},
						{
							price: 385,
							title: '测试商品3',
							dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
							image: '/static/image/goods_item.png',
						},
						{
							price: 3825,
							title: '测试商品4',
							dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
							image: '/static/image/goods_item.png',
						},
					]
				},
				{
					title: "生活家居",
					advImg:"/static/image/prod1.png",
					flowList: [{
							price: 35,
							title: '测试商品1',
							dec: '测试商品1的描述',
							image: '/static/image/goods_item.png',
						},
						{
							price: 75,
							title: '测试商品2',
							dec: '测试商品21231的描去啊阿萨大情为全文述',
							image: '/static/image/goods_item.png',
						},
						{
							price: 385,
							title: '测试商品3',
							dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
							image: '/static/image/goods_item.png',
						},
						{
							price: 3825,
							title: '测试商品4',
							dec: '李白杜甫白居易旗阿萨大阿萨大舰店',
							image: '/static/image/goods_item.png',
						},
					]
				}]
			};

		},

		components: {
			shopHead,
			addBtn,
			goodItme,
			footerBar1
		},
		methods: {
			navTap(index) {
				this.navIndex = index
			},
			addGoods(index){
				console.log(idx)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$paddingboth:20rpx;

	page {
		
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		background-color: #f5f5f5;
	}

	.container {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-bottom: 130rpx;
	}

	.goods_contain {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 $paddingboth;
		background-color: #FFFFFF;
		margin-top: 40rpx;

		.module_cont {
			width: 100%;
			box-sizing: border-box;
			padding: 23rpx 0 26rpx;
			font-size: 30rpx;
			font-weight: 900;
			background: #fff;

			.module {
				box-sizing: border-box;
				padding-left: 12rpx;
				border-radius: 5rpx 0 0 5rpx;
				border-left: 5rpx solid #4863EA;
				padding: -10rpx 0;

			}
		}

		.goods_tp1 {
			box-sizing: border-box;
			height: 221rpx;
			width: 100%;

			.tp1_img {
				width: 100%;
				height: 100%;
			}

		}

		.goods_content {
			width: 100%;
		}
	}
</style>
